import FormElement from "../using/typing/form-element";
import RootContainerDesign from "./root-container-design";

export class ElementOperator {

    private operatorEleContainer

    constructor(private ele: FormElement<any>, private container: RootContainerDesign) {
        const el = ele.getEl();
        this.operatorEleContainer = this.genOperatorEleContainer()
        el.appendChild(this.operatorEleContainer)
        el.addEventListener('mouseenter', (ev) => {
            this.mouseInEvent(ev)
        })
        el.addEventListener('mouseleave', (ev) => {
            this.mouseOutEvent(ev)
        })
    }

    mouseInEvent(ev: MouseEvent) {
        this.operatorEleContainer.style.display = 'block'
    }

    mouseOutEvent(ev: MouseEvent) {
        this.operatorEleContainer.style.display = 'none'
    }

    genOperatorEleContainer() {
        const container = document.createElement('div');
        container.style.display = 'none'
        container.classList.add('absolute', "w-full", "text-right")

        const del = document.createElement('button');
        del.innerText = 'Delete'
        del.classList.add('w-16', 'h-8', 'subpixel-antialiased', 'bg-sky-600', 'rounded-lg', 'border-indigo-300', 'outline-1', 'outline-cyan-500', 'shadow-blue-500/50', 'text-slate-300', 'm-1');
        del.addEventListener('click', (ev) => {
            this.remove()
        })
        container.appendChild(del)
        return container
    }

    private remove() {
        // TODO 写一个 remove config 的方法,
        // 需要清除元素
        this.container.removeFormEle(this.ele)
    }

}
